<template>
  <div>
    <h1>Edit</h1>
    <div>Nickname: {{ user.nickname }}</div>
    <div>Age: <input v-model="user.age" placeholder=""></div>
    <button type="button" @click="updateUser()">Update</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          id: 0,
          nickname: '',
          age: 0
        }
      }
    },
    methods: {
      getUser: function () {
        const _self = this;
        this.$ajax('user/show', 'GET', {'id': this.$route.query.id}, function (data) {
          console.log("showing data");
          console.log(data.user);
          _self.user = data.user;
        });
      },
      updateUser: function () {
        const _self = this;
        this.$ajax('user/update', 'POST', {'id': this.user.id, 'age': parseInt(this.user.age)}, function (data) {
          location.href = '/';
        });
      }
    },
    mounted: function () {
      this.getUser();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
